<div nz-row>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px;">
      <nz-card-meta [nzAvatar]="avatarTemplate1" [nzTitle]="data.bjtj.allalert" nzDescription="当前卡控报警">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate1>
      <nz-avatar nzIcon="alert" [nzShape]="'square'" style="background: #2cce4b;" class="gjlb-titleinfo"></nz-avatar>
      <!-- <i nz-icon nzType="alert" nzTheme="outline" style="background: #2cce4b;"></i> -->
    </ng-template>
  </div>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px">
      <nz-card-meta [nzAvatar]="avatarTemplate2" [nzTitle]="data.bjtj.ckalert" nzDescription="已审核">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate2>
      <!-- <i nz-icon nzType="audit" nzTheme="outline"></i> -->
      <nz-avatar nzIcon="audit" [nzShape]="'square'" style="background: #24cecd;" class="gjlb-titleinfo"></nz-avatar>
    </ng-template>
  </div>
  <div nz-col nzSpan="8">
    <nz-card style="width: 90%;margin-top: 16px">
      <nz-card-meta [nzAvatar]="avatarTemplate3" [nzTitle]="data.bjtj.allalert-data.bjtj.ckalert" nzDescription="未审核">
      </nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate3>
      <!-- <i nz-icon nzType="file-search" nzTheme="outline"></i> -->
      <nz-avatar nzIcon="file-search" [nzShape]="'square'" style="background: #ef4d4c;" class="gjlb-titleinfo">
      </nz-avatar>
    </ng-template>
  </div>
</div>
<!-- 主页面 -->
<div nz-row style="background-color:white;padding:0px 20px;">
  <div nz-col nzSpan="4">
    <button nz-button [nzType]="'primary'" (click)="showAddBar()" style="margin:10px;">增加种类</button>

  </div>
  <div nz-col nzSpan="20">
    <div *ngIf="showAdd" style="margin:10px;" nzFlex>
      <label for="gjzlInput">种类名称:</label>
      <input nz-input #gjzlInput [(ngModel)]="data.addInfo.equistylename" style="width:200px;margin-left:20px;" />
      <button nz-button [nzType]="'primary'" (click)="save('add')" style="margin:10px;">保存</button>
    </div>
  </div>
</div>
<div nz-row style="background-color:white;padding:0px 20px;">
  <div nz-col nzSpan="24">
    <nz-table #basicTable [nzScroll]="lockHeadScroll" [nzData]="data.tableData" [nzFrontPagination]="false"
      [nzTotal]="data.tableTotal" [(nzPageSize)]="data.tablePagination.rows" nzShowSizeChanger [nzShowPagination]="true"
      [(nzPageIndex)]="data.tablePagination.page" (nzPageIndexChange)="nzPageIndexChange()"
      (nzPageSizeChange)="setPageSize()" [nzShowTotal]="totalTemplate">
      <ng-template #totalTemplate let-total> 总共 {{ data.tableTotal }} 条数据 </ng-template>
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="80%">种类</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let _data of data.tableData;let i = index">
          <!-- <td nzShowCheckbox [(nzChecked)]="checkStatus[i]"></td> -->
          <td *ngIf="!saveStatus[i]; else elseTemplate1">{{ _data.equistylename }}</td>
          <ng-template #elseTemplate1>
            <td>
              <textarea nz-input [(ngModel)]="_data.equistylename" nzAutosize="true"></textarea>
            </td>
          </ng-template>
          <td nzAlign="center" *ngIf="!saveStatus[i]; else elseTemplate2"><a href="javascript:void(0)"
              (click)="showSave(i)">修改</a></td>
          <ng-template #elseTemplate2>
            <td nzAlign="center">
              <a href="javascript:void(0)" (click)="save('save',i)" style="margin-right:10px;">保存</a>
              <a href="javascript:void(0)" (click)="showSave(i)">取消</a>
            </td>
          </ng-template>

        </tr>
      </tbody>
    </nz-table>
  </div>
</div>